<%--
  Created by IntelliJ IDEA.
  Author: Deng PengFei
  Date: 2021/8/14
  Time: 10:45
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>个人邮箱</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <%--引入LayUI--%>
    <link href="layui/css/layui.css" rel="stylesheet">
    <script src="layui/layui.js"></script>
    <script src="js/jquery-3.1.0.js"></script>
    <style>
        body {
            background-color: #eeeeee;
        }

        .layui-row {
            padding: 10px;
            margin: 10px;
            background-color: white;
            border-radius: 5px;
        }

        .layui-card {
            border: solid #e2e2e2 1px;
            margin-top: 0;
            height: 100%;
        }

        #outBox, #inBox, #drafts, #linkMan, #gifts, #recycleBox, .layui-card-header {
            cursor: pointer;
        }

        .left {
            width: 30%;
            text-align: right;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <%--面包屑导航--%>
    <%--<div class="layui-row">
            <span class="layui-breadcrumb">
             <a href="teacher/adviser/studentInfo.jsp">首页</a><a><cite>个人邮件</cite></a>
            </span>
    </div>--%>


    <%--左边--%>
    <div class="layui-col-lg9">

        <%--邮件列表--%>
        <div class="layui-row" style="height: 85%">

            <%--收件箱--%>
            <div class="layui-card" id="show-in-box" style="display: block">
                <div class="layui-card-header" style="font-size: 20px">
                    <i class="layui-icon layui-icon-email" style="color: #009f95;font-size: 32px"></i>
                    我 的 收 件 箱
                </div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="inBox-table" lay-filter="inBox-table"></table>
                </div>
            </div>

            <%--发件箱--%>
            <div class="layui-card" id="show-out-box" style="display: none">
                <div class="layui-card-header" style="font-size: 20px">
                    <i class="layui-icon layui-icon-upload" style="color: #009f95;font-size: 32px"></i>
                    我 的 发 件 箱
                </div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="outBox-table" lay-filter="outBox-table"></table>
                </div>
            </div>


        </div>

    </div>


    <%--右边工具 收件箱与发件箱--%>
    <div class="layui-col-lg3">
        <div class="layui-row" style="height: 85%">
            <div class="layui-card">
                <div class="layui-card-header" style="font-size: 20px">
                    <img src="img/email.png" alt="个人邮箱"><i class="layui-icon "></i> 个 人 邮 箱
                </div>
                <div class="layui-card-body" style="padding-left: 40px">

                    <hr>
                    <a id="inBox">
                        <i class="layui-icon layui-icon-email" style="color: #009f95;font-size: 20px"></i>
                        收 件 箱 (<span id="inBox-sum">0</span>)<br>
                    </a>
                    <hr>
                    <a id="outBox">
                        <i class="layui-icon layui-icon-upload" style="color: #009f95;font-size: 20px"></i>
                        发 件 箱 (<span id="outBox-sum">0</span>)<br>
                    </a>
                    <hr>
                    <a id="drafts">
                        <i class="layui-icon layui-icon-note" style="color: #009f95;font-size: 18px"></i>
                        草 稿 箱 (<span>0</span>)<br>
                    </a>
                    <hr>
                    <a id="linkMan">
                        <i class="layui-icon layui-icon-friends" style="color: #009f95;font-size: 18px"></i>
                        联 系 人 (<span>0</span>)<br>
                    </a>
                    <hr>
                    <a id="gifts">
                        <i class="layui-icon layui-icon-gift" style="color: #009f95;font-size: 18px"></i>
                        明 信 片 (<span>0</span>)<br>
                    </a>
                    <hr>
                    <a id="recycleBox">
                        <i class="layui-icon layui-icon-delete" style="color: #009f95;font-size: 20px"></i>
                        回 收 站 (<span>0</span>)<br>
                    </a>
                    <hr>
                    <button class="layui-btn layui-btn-primary layui-border-green layui-btn-radius"
                            style="width: 100%" id="write-email-btn">
                        <i class="layui-icon layui-icon-edit" style="font-size: 20px"></i> 去 写 信
                    </button>
                    <br>
                    <hr>
                </div>
            </div>
        </div>
    </div>

</div>

</body>


<%--头部工具栏--%>
<div id="email-table-toolbar" style="display: none">
    <div class="test-table-reload-btn">
        <div class="layui-inline" style="border: #009f95 solid 1px">
            <label for="queryKey"></label>
            <input class="layui-input" id="queryKey" autocomplete="off" placeholder="邮箱标题或者姓名">
        </div>
        <a class="layui-btn layui-btn-primary layui-border-green" lay-event="queryEmail">搜 索</a> <%--按字段查询--%>
        <a class="layui-btn layui-btn-primary layui-border-green" lay-event="queryAll">全 部</a> <%--查询全部--%>
    </div>
</div>

<%--操作栏--%>
<div id="email-table-tool" style="display: none">
    <button class="layui-btn layui-btn-radius  layui-btn-primary layui-border-green layui-btn-xs" lay-event="detail">
        查看详情
    </button>
</div>


<%--邮件详情模板--%>
<div class="layui-row" id="email-detail" style="display: none">
    <table class="layui-table" lay-skin="line">
        <tbody>
        <tr>
            <td class="left">编 号:</td>
            <td id="email-id"></td>
        </tr>
        <tr>
            <td class="left">标 题:</td>
            <td id="email-title"></td>

        </tr>
        <tr>
            <td class="left" id="set-name">发件人姓名:</td>
            <td id="email-mane"></td>

        </tr>
        <tr>
            <td class="left" id="set-no">发件人学号/工号:</td>
            <td id="email-no"></td>
        </tr>
        <tr>
            <td class="left" id="email-email1">发件人学号/工号:</td>
            <td id="email-email"></td>
        </tr>
        <tr>
            <td class="left">发 件 时 间:</td>
            <td id="email-time"></td>
        </tr>
        <tr>
            <td class="left">邮 件 内 容:</td>
            <td id="email-content"></td>
        </tr>
        </tbody>
    </table>
</div>


<%--发件模板--%>
<div class="layui-fluid" id="write-email" style="display: none;height: 98%">
    <div class="layui-card">
        <div class="layui-card-header" style="padding: 10px">
            <blockquote class="layui-elem-quote">
                <h3>
                    <img src="img/QQEmail.png" alt="">
                    发送邮件
                </h3>
            </blockquote>
        </div>
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" method="post" lay-filter="send-email-form">


                <div class="layui-form-item">
                    <label class="layui-form-label" for="title">邮件标题：<span class="layui-badge-dot"></span></label>
                    <div class="layui-input-block">
                        <input type="text" id="title" name="title" lay-verify="required" autocomplete="off"
                               placeholder="请输入邮件标题" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" for="role">发送对象：<span class="layui-badge-dot"></span></label>
                    <div class="layui-input-block" style="width: 150px;">
                        <select id="role" name="role" lay-verify="" autocomplete="off">
                            <option value="1">学生</option>
                            <option value="2">教师</option>
                            <option value="3">管理员</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" for="NO">收件人学号/工号：<span class="layui-badge-dot"></span></label>
                    <div class="layui-input-block">
                        <input type="text" id="NO" name="NO" lay-verify="required" placeholder="收件人学号/工号"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label" for="text">邮件内容：<span class="layui-badge-dot"></span></label>
                    <div class="layui-input-block">
                        <textarea id="text" name="text" placeholder="请输入邮件内容" lay-verify="required"
                                  class="layui-textarea" style="height: 30%"></textarea>
                    </div>
                </div>

                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="send-email-btn">
                            发送
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>


                <hr>
                <div class="layui-form-item" style="color: #999999">
                    <i class="layui-icon layui-icon-top"></i> 提示说明：
                    <div style="padding-left: 2em;font-size: 12px">
                        <p>如果你是首次通过本系统发送邮件，请先在个人中心的邮箱设置中设置你的邮箱授权码</p>
                        <p>如果设置授权码，邮件发送失败，请在个人中心检查设置的授权码是否正确</p>
                        <p>如果有其它问题，请联系管理人员</p>
                    </div>


                </div>

            </form>
        </div>
    </div>
</div>


<script>
    let USERNAME;
    $(function () {
        USERNAME = '${sessionScope.userName}';
    });
</script>

<script src="js/email.js"></script>

</html>
